<template>
  父组件
  <hr />
  <SlotA>
    <!-- 1.插入元素 -->
    <button>我是父组件插入的btn</button>
  </SlotA>
  <hr />
  <SlotA>
    <!-- 1.未声明插入插槽时，默认全部插入默认插槽 -->
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
  </SlotA>
  <hr />
  <SlotB>
    <!-- 1.未声明插入插槽时，默认全部插入默认插槽（父组件传几份，插槽都会被填充） -->
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
  </SlotB>
  <hr />
  <SlotC :slotName="slotName">
    <!-- 指定需要插入的插槽 -->
    <template v-slot:right>
      <span>aaa</span>
    </template>
    <!-- 空阔号取自data里面的值 -->
    <template v-slot:[slotName]>
      <span>动态指定slot的名称</span>
    </template>
    <!-- v-slot的缩写# -->
    <template #left>
      <span>bbb</span>
    </template>
    <!-- <slot>不指定名字的插槽默认的name=defalut</slot> -->
    <template v-slot:default>
      <span>ccc</span>
    </template>
  </SlotC>
</template>

<script>
import SlotA from './slotA.vue'
import SlotB from './slotB.vue'
import SlotC from './slotC具名插槽的使用-动态绑定插槽名称.vue'
export default {
  components: { SlotA, SlotB, SlotC },
  data() {
    return {
      slotName: 'zjd',
    }
  },
}
</script>

<style scoped></style>
